<template>
    <el-card shadow="never" style="margin-bottom: 14px;"></el-card>
    <el-card shadow="never">
        <div style="margin-bottom: 14px;">
            <el-button type="primary">添加分类</el-button>
        </div>

        <!-- 表格渲染 -->
        <BaseTable :data="tableData.rows" :columns="columns" :total="tableData.total" v-model="pageData">

            <template #state="{ row }">
                <el-switch v-model="row.state" active-text="开启" inactive-text="关闭" inline-prompt :active-value="1"
                    :inactive-value="0"></el-switch>
            </template>

            <template #action>
                <el-button>修改</el-button>
                <el-button>删除</el-button>
            </template>

        </BaseTable>
    </el-card>
</template>

<script setup lang="ts">
import api from '@/api';
import { onMounted, reactive, ref, watch } from 'vue';

// 表格列配置
const columns = [
    {
        label: '分类名称',
        prop: 'name'
    },
    {
        label: '分类图标',
        prop: 'icon'
    },
    {
        label: '排序',
        prop: 'sort'
    },
    {
        label: '状态',
        prop: 'state'
    },
    {
        label: '操作',
        prop: 'action'
    }
]

const tableData = reactive({
    rows: [],
    total: 0
})

// 分页数据
const pageData = ref<PageQuery>({
    currentPage: 1,
    pageSize: 5
})

watch(pageData, () => {
    getClassifyData();
}, {
    deep: true
})

onMounted(() => {
    getClassifyData();
})

const getClassifyData = () => {
    api.classifies.search(pageData.value)
        .then(res => {
            console.log(res);
            if (res.code == 200) {
                tableData.rows = res.data.rows;
                tableData.total = res.data.total;
            }
        })
}
</script>